<x-row space="1">
  <x-col span="6"><x-color label="main text" hex="#303133" [amounts]="[]"></x-color></x-col>
  <x-col span="6"><x-color class="black" label="Level 1 border" hex="#dcdfe6" [amounts]="[]"></x-color></x-col>
  <x-col span="6"><x-color label="base black" hex="#000000" [amounts]="[]"></x-color></x-col>
</x-row>
<x-row space="1">
  <x-col span="6"><x-color label="Conventional text" hex="#606266" [amounts]="[]"></x-color></x-col>
  <x-col span="6"><x-color class="black" label="Level 2 border" hex="#e4e7ed" [amounts]="[]"></x-color></x-col>
  <x-col span="6"><x-color class="border black" label="base white" hex="#ffffff" [amounts]="[]"></x-color></x-col>
</x-row>
<x-row space="1">
  <x-col span="6"><x-color label="Secondary text" hex="#909399" [amounts]="[]"></x-color></x-col>
  <x-col span="6"><x-color class="black" label="Level 3 border" hex="#ebeef5" [amounts]="[]"></x-color></x-col>
</x-row>
<x-row space="1">
  <x-col span="6"><x-color label="Placeholder text" hex="#c0c4cc" [amounts]="[]"></x-color></x-col>
  <x-col span="6"><x-color class="black" label="Level 4 border" hex="#f2f6fc" [amounts]="[]"></x-color></x-col>
</x-row>
